<template>
  <div class="container-header-margin content">
    <div>
      <a-row>
        <a-col :span="4"></a-col>
        <a-col :span="16">
          <div class="title">学生报名信息填写</div>
          <a-form ref="formRef" :model="formState" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
            <a-row :gutter="20">
              <a-col :span="12">
                <a-form-item ref="name" label="姓名" name="name" :labelCol="{ offset: 1 }">
                  <a-input v-model:value="formState.name" />
                </a-form-item>
              </a-col>

              <a-col :span="12">
                <a-form-item ref="typeSelected" label="报名科目" :labelCol="{ offset: 1 }" name="typeSelected">
                  <a-cascader v-model:value="formState.typeSelected" :options="typeTreeList" :field-names="{
                    label: 'name',
                    value: 'id',
                    children: 'children',
                  }" placeholder="请选择" @change="handleChange" />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="20">
              <a-col :span="12">
                <a-form-item ref="number" label="学号" name="number" :labelCol="{ offset: 1 }">
                  <a-input v-model:value="formState.number" />
                </a-form-item>
              </a-col>

              <a-col :span="12">
                <a-form-item ref="teacher1" label="第一志愿导师" name="teacher1" :labelCol="{ offset: 1 }">
                  <teacher-selector v-model="formState.teacher1" placeholder="请选择第一志愿导师" :race-id="route.query.id" />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="20">
              <a-col :span="12">
                <a-form-item ref="sClass" label="班级" name="sClass" :labelCol="{ offset: 1 }">
                  <class-selector v-model="formState.sClass" />
                </a-form-item>
              </a-col>

              <a-col :span="12">
                <a-form-item ref="teacher2" label="第二志愿导师" name="teacher2" :labelCol="{ offset: 1 }">
                  <teacher-selector v-model="formState.teacher2" placeholder="请选择第二志愿导师" :race-id="route.query.id" />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="20">
              <a-col :span="12">
                <a-form-item ref="phone" label="电话" name="phone" :labelCol="{ offset: 1 }">
                  <a-input v-model:value="formState.phone" />
                </a-form-item>
              </a-col>

              <a-col :span="12">
                <a-form-item ref="teacher3" label="第三志愿导师" name="teacher3" :labelCol="{ offset: 1 }">
                  <teacher-selector v-model="formState.teacher3" placeholder="请选择第三志愿导师" :race-id="route.query.id" />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="20">
              <a-col :span="12">
                <a-form-item ref="email" label="邮箱" name="email" :labelCol="{ offset: 1 }">
                  <a-input v-model:value="formState.email" />
                </a-form-item>
              </a-col>

              <a-col :span="12">
                <a-form-item ref="bankNumber" label="银行卡账号" name="bankNumber" extra="获奖必须填写" :labelCol="{ offset: 1 }">
                  <a-input v-model:value="formState.bankNumber" placeholder="建设银行卡" />
                </a-form-item>
              </a-col>
            </a-row>

            <a-row :gutter="20">
              <a-col :span="12"><a-form-item ref="identity" label="身份证" name="identity" :labelCol="{ offset: 1 }">
                  <a-input v-model:value="formState.identity" />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item ref="bankName" label="开户行" name="bankName" extra="获奖必须填写" :labelCol="{ offset: 1 }">
                  <a-input v-model:value="formState.bankName" />
                </a-form-item>
              </a-col>
            </a-row>

            <a-row :gutter="20">
              <a-col :span="24">
                <a-form-item ref="remark" label="备注" name="remark" :labelCol="{ offset: 1 }">
                  <a-textarea v-model:value="formState.remark" :maxlength="256" show-count />
                </a-form-item>
              </a-col>
            </a-row>

            <div style="text-align: center">
              <a-button style="float: left" size="large" @click="jump('/ss/lqb')">返回上一页</a-button>
              <a-button type="primary" size="large" @click="onSubmit" :loading="loading">{{ formState.id ? "更新报名信息" :
                "提交报名" }}</a-button>
              <a-button style="margin-left: 10px" size="large" @click="resetForm">重置填写</a-button>
              <a-button style="margin-left: 10px" size="large" danger @click="del" v-if="formState.id">取消报名</a-button>
            </div>
          </a-form>
        </a-col>
        <a-col :span="4"></a-col>
      </a-row>
    </div>
  </div>
</template>

<script setup>
import { useUserStore } from "@/store/user";
import { SYSYTM_TITLE } from "@/config";
import { reactive, ref, toRaw } from "vue";
import { message, Modal } from "ant-design-vue";
import { useRoute, useRouter } from "vue-router";
import ClassSelector from '@/components/ClassSelector.vue';
import TeacherSelector from '@/components/TeacherSelector.vue';

import {
  student_bm,
  lanqiao_type_list,
  get_student_bm,
  update_student_bm,
  delete_bm,
} from "@/apis";
import { handleTree } from "@/utils";

const route = useRoute();
const user = useUserStore();
useSeoMeta({
  title: "学生报名-" + SYSYTM_TITLE,
  description: SYSYTM_TITLE,
  keywords: "白云学院,创新创业网",
  robots: "index, follow",
  canonical: "https://example.com",
});

const typeList = ref([]);
const typeTreeList = ref([]);
function handleChange(data) {
  console.log(data);
  formState.value.parentTid = data[0];
  formState.value.sonTid = data[1];
}
const router = useRouter();
function jump(path) {

  router.push({ path: path, query: route.query });
}
const loading = ref(false);
const formRef = ref();
const labelCol = {
  span: 1,
};
const wrapperCol = {
  span: 23,
};
const formState = ref({
  raceId: "",
  id: "",
  name: "",
  number: "",
  sClass: "",
  phone: "",
  email: "",
  identity: "",
  sonTid: "",
  teacher1: "",
  teacher2: "",
  teacher3: "",
  bankNumber: "",
  bankName: "",
  remark: "",
  typeSelected: [],
});
const rules = {
  name: [
    {
      required: true,
      message: "请填写姓名",
      trigger: "change",
    },
  ],
  number: [
    {
      required: true,
      message: "请填写学号",
      trigger: "change",
    },
  ],
  sClass: [
    {
      required: true,
      message: "请填写班级",
      trigger: "change",
    },
  ],
  phone: [
    {
      required: true,
      message: "请填写手机号",
      trigger: "change",
    },
    {
      message: "请填写正确手机号",
      trigger: "blur",
      pattern: /^1[3456789]\d{9}$/,
    },
  ],
  email: [
    {
      required: true,
      message: "请填写电子邮箱",
      trigger: "change",
      type: "email",
    },
    {
      message: "请填写正确的电子邮箱",
      trigger: "blur",
      type: "email",
    },
  ],
  identity: [
    {
      required: true,
      message: "请填写身份证号",
      trigger: "change",
    },
    {
      message: "请填写正确的身份证号",
      trigger: "blur",
      pattern:
        /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
    },
  ],
  typeSelected: [
    {
      required: true,
      message: "请填写报名科目",
      trigger: "change",
    },
  ],
};
function del() {
  Modal.confirm({
    title: "取消报名",
    content: "确认取消报名吗？",
    okText: "确认",
    cancelText: "取消",
    onOk: () => {
      delete_bm({ raceId: route.query.id, flag: 0 }).then((res) => {
        message.success("取消报名成功");
        jump("/ss/lqb");
      });
    },
  });
}
const onSubmit = () => {
  formRef.value
    .validate()
    .then(() => {
      formState.value.raceId = route.query.id;
      console.log("values", formState.value);
      // message.success("参数校验成功");
      loading.value = true;
      const api = formState.value.id
        ? update_student_bm(formState.value)
        : student_bm(formState.value);
      api
        .then((res) => {
          console.log("res", res);
          loading.value = false;
          if (formState.value.id) {
            message.success("修改成功");
            init();
          } else {
            jump("/ss/lqb");
            message.success("报名成功");
          }
        })
        .catch((error) => {
          loading.value = false;
          console.log("error", error);
          // message.error("报名失败");
        });
    })
    .catch((error) => {
      console.log("error", error);
      // message.error("参数校验不通过");
    });
};
const resetForm = () => {
  formRef.value.resetFields();
};

function getTypeList() {
  lanqiao_type_list({}).then((res) => {
    typeList.value = res.data;
    // console.log("typeList", typeList.value);
    typeTreeList.value = handleTree(
      typeList.value,
      "id",
      "parentId",
      "children"
    );

  });
}

function init() {
  get_student_bm({ raceId: route.query.id })
    .then((res) => {
      loading.value = false;
      if (res.data) {
        formState.value = res.data;
        formState.value.typeSelected = [res.data.parentTid, res.data.sonTid];
      }
    })
    .catch((error) => {
      loading.value = false;
    });
}



onMounted(() => {
  getTypeList();
  init();
});
</script>

<style lang="less" scoped>
.content {
  min-height: 90vh;
}

.title {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 20px;
  margin-top: 20px;
}

.option-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.class-select-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;

  .ant-input {
    flex: 1;
  }

  .ant-btn-link {
    padding: 4px 0;
    height: 32px;
    line-height: 24px;
    white-space: nowrap;

    &:hover {
      color: #1890ff;
    }
  }
}

:deep(.ant-input-disabled) {
  color: rgba(0, 0, 0, 0.85);
  background-color: #f5f5f5;
  cursor: not-allowed;
  opacity: 1;
}
</style>